<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script lang="ts" setup>
  import '@unocss/reset/tailwind.css'
  const { token } = useAuth();
  import { refreshUserPersonInfo } from "~/service/yapi";


  onMounted(() => {

    if (token.value) {
      refreshUserPersonInfo({})

    }

  })

  useHead({
    title: "墨墨AI - 一站式体验/学习/使用AI",
    meta: [
      {
        name: "description",
        content:
          "墨墨AI 是一个一站式AI服务平台，在这里可以免费体验/学习/使用AI，同时这里也有活跃的AI社区，互相分享AI的使用心得和绘画作品，尤其是汇聚了一大批拥有创造力和想象力的青少年，让我们一起来紧跟时代，进入人工智能的世界。同时我们也提供定制AI服务，为中小学建设自有AI教育平台，科教兴国！",
      },
      {
        name: "keywords",
        content:
          "墨墨AI, 青少年AI, 人工智能, AI助手, 学习平台, 互动课程, 实践项目, 创造力,侯老师AI,教师AI,学校AI,校园AI,定制AI,体验AI,学习AI,中小学AI,小学老师AI,教案AI设计,AIPPT,AI问答,AI绘画,SD体验,chatGPT体验,免费AI,免费chatGPT,免费AI绘图,AI绘图",
      },
    ],
    script: [
      { src: "//at.alicdn.com/t/c/font_4245078_yumznx60spg.js" },
      { src: "https://hm.baidu.com/hm.js?ab988d3b79e05fce63f8b89a5c9e3b17" },

    ],
  });
</script>
<style lang="scss">
  body {
    font-family: Helvetica Neue, Helvetica, sans-serif;
    /* Color 可以自定义相关配色 */
    --red: #d24f37;
    --orange: #f37b1d;
    --yellow: #fbbd08;
    --olive: #8dc63f;
    --green: #1ec480;
    --cyan: #1cbbb4;
    --blueL: #3083f9;
    --blue: #745afc;
    --purple: #755afb;
    --mauve: #9c26b0;
    --pink: #e03997;
    --brown: #a45753;
    --grey: #8799a3;
    --gray: #666666;
    --black: #333333;
    --white: #ffffff;
    /* 浅色 */
    --redLight: #fadbd9;
    --orangeLight: #fde6d2;
    --yellowLight: #fef2ce;
    --oliveLight: #e8f4d9;
    --greenLight: #d7f0db;
    --cyanLight: #d2f1f0;
    --blueLight: #cce6ff;
    --purpleLight: #e1d7f0;
    --mauveLight: #ebd4ef;
    --pinkLight: #f9d7ea;
    --brownLight: #ede1d9;
    --greyLight: #e7ebed;
    --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
    --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
    --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
    --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
    --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
    --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);

    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE and Edge */
    &::-webkit-scrollbar {
      /* Chrome Safari */
      display: none;
    }

    /* 隐藏滚动条 */
    /* firefox */
    scrollbar-width: none;
    /* IE 10+ */
    -ms-overflow-style: none;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .container {
    margin: 0 auto;
    min-height: 100vh;
  }

  @media (min-width: 1920px) {
    .container {
      max-width: 1400px;
    }
  }

  @media (max-width: 1400px) {
    .container {
      max-width: 1400px;
    }
  }

  @media (min-width: 1536px) {
    .container {
      max-width: 1400px;
    }
  }

  @media (min-width: 1280px) {
    .container {
      max-width: 1280px
    }
  }

  .message-text .markdown-body {
    font-size: 14px;
    line-height: 1.3;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;

    p,
    li {
      margin-top: 4px;
      margin-bottom: 4px;
    }

    ol,
    ul {
      display: flex;
      flex-direction: column;
    }

    li:has(> div),
    li:has(> p) {
      display: flex;
      flex-direction: column;
    }


    /* 需要在全局范围应用的样式 */
    .code-block-wrapper {
      position: relative;
      margin: 8px 0;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #e6e6e6;
      display: flex;
      flex-direction: column;
    }

    .code-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f1f1f1;
      padding: 2px 6px;
      /* 减小上下内边距 */
      border-bottom: 1px solid #e1e1e1;
      height: 24px;
      /* 设定固定高度 */
    }

    .code-language {
      font-size: 11px;
      /* 缩小字体 */
      color: #666;
      line-height: 1;
      /* 确保行高紧凑 */
    }

    .copy-code-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #666;
      padding: 1px 3px;
      /* 减小内边距 */
      display: flex;
      align-items: center;
      height: 20px;
      /* 控制按钮高度 */
    }

    .copy-code-btn:hover {
      color: #1890ff;
    }
  }

  .picture-grid {
    display: flex;
    flex-wrap: wrap;
  }

</style>
